<template>
  <div class="add-main">
    <!--订单信息-->
    <el-card class="box-card add" shadow="never">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>
<el-form  label-position="top" label-width="80px" :model="ruleForm">
     <el-row type="flex" justify="space-between">
    <el-col :span="7"> <el-form-item label="订单状态">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
    <el-col :span="7"> <el-form-item label="派单方式">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="提货" name="type"></el-checkbox>
      <el-checkbox label="干线" name="type"></el-checkbox>
      <el-checkbox label="送货" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item></el-col>
     <el-col :span="7"> <el-form-item label="订单编号">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
</el-row>
    <el-row type="flex" justify="space-between">
    <el-col :span="7"> <el-form-item label="下单时间">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
    <el-col :span="7"> <el-form-item label="线路">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
     <el-col :span="7"> <el-form-item label="温控要求">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
</el-row>
<el-row >
   <el-form-item label="订单备注">
    <el-input v-model="ruleForm.name" placeholder="客户填写的特殊需求订单备"></el-input>
  </el-form-item>
</el-row>
<el-row type="flex" justify="space-between">
    <el-col :span="7"> <el-form-item label="寄件人">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
    <el-col :span="7"> <el-form-item label="电话">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
     <el-col :span="7"> <el-form-item label="地址">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
</el-row>
<el-row type="flex" justify="space-between">
    <el-col :span="7"> <el-form-item label="收件人">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
    <el-col :span="7"> <el-form-item label="电话">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
     <el-col :span="7"> <el-form-item label="地址">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
</el-row>
<el-row type="flex" justify="space-between">
    <el-col :span="4"> <el-form-item label="货品名称">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
    <el-col :span="4"> <el-form-item label="货品数量">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item></el-col>
     <el-col :span="4"> <el-form-item label="货品体积">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="4"> <el-form-item label="货品重量">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="4"> <el-form-item label="货品价格">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  </el-col>
</el-row>
</el-form>
    </el-card>
    <!--派车单信息-->
    <el-card class="box-card mt20" shadow="never">
      <div slot="header" class="clearfix">
        <span>派车单信息</span>

      </div>

      <el-table
        :data="dispatchTable"
        :header-cell-style="headStyle"
      >

        <el-table-column
          prop="name"
          label="派车单类型"
          align="center"
          width="150"
        />
        <el-table-column
          prop="userName"
          label="派车单编号"
          width="150"
          align="center"
        />
        <el-table-column
          prop="orgName"
          label="司机姓名"
          width="150"
          align="center"
        />
        <el-table-column
          prop="roleNames"
          label="司机电话"
          width="150"
          align="center"
        />
        <el-table-column
          prop="userCreatedName"
          label="车牌号"
          align="center"
          width="150"
        />
        <el-table-column
          prop="gmtCreated"
          label="交接地址"

          align="center"
        />
        <el-table-column
          prop="gmtCreated"
          label="交接人姓名"
          align="center"
        />
        <el-table-column
          prop="gmtCreated"
          label="交接人电话"
          align="center"
        />

      </el-table>
    </el-card>
    <!--仓库信息-->
    <el-card class="box-card mt20" shadow="never">
      <div slot="header" class="clearfix">
        <span>仓库信息</span>

      </div>

      <el-table
        :data="warehouseTable"
        :header-cell-style="headStyle"
      >
 <el-table-column
      label="仓库信息"
      width="180">
   <template slot-scope="scope">
        <el-select v-model="scope.row.name" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </template>
    </el-table-column>
       <el-table-column
      label="仓库类型"
      width="180">
      <template slot-scope="scope">
        <el-select v-model="scope.row.name" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </template>
    </el-table-column>
 

        <el-table-column
          prop="orgName"
          label="仓库名称"
          width="150"
          align="center"
        />
        <el-table-column
          prop="roleNames"
          label="仓库地址"
          width="150"
          align="center"
        />
        <el-table-column
          prop="userCreatedName"
          label="营业时间"
          align="center"
          width="150"
        />
           <el-table-column
      label="仓管姓名"
      width="180">
      <template slot-scope="scope">
        <el-select v-model="scope.row.name" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </template>
    </el-table-column>
        <el-table-column
          prop="gmtCreated"
          label="仓管电话"
          align="center"
        />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">

            <el-button
              type="text"
              size="small"
              style="color:#EC4141"
              @click="handleDel(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-row class="mt20" style="width:100%">
        <el-button @click="addTable" style="width:100%;border:1px dashed #DCDFE6;" icon="el-icon-plus">新增</el-button>
      </el-row>
    </el-card>
    <!--状态变更记录-->
    <el-card class="box-card mt20" shadow="never">
      <div slot="header" class="clearfix">
        <span>状态变更记录</span>

      </div>

      <el-table
        :data="statusTable"
        :header-cell-style="headStyle"
      >

        <el-table-column
          prop="name"
          label="变更时间"
          align="center"
        />
        <el-table-column
          prop="userName"
          label="状态"

          align="center"
        />
        <el-table-column
          prop="orgName"
          label="详细信息"
          align="center"
        />

      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
     options: [{
          value: '琪',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }],
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      headStyle: {
        background: '#E5E8EF',
        color: '#373A49'
      },
      addFormVisible: false, // 新增
      currentPage: 1,
      total: 0,
      query: {
        name: '',
        userName: '',
        pageNumber: 1, // 当前请求的是第几页数据
        pageSize: 10
      },
      rowNum:1,
      dispatchTable: [
        {
          userName: 'ASDFGH',
          password: 'e24258039769dd42368742d8bd9d55e8',
          name: 'A3级别',
          contactTel: '',
          organizationId: 85,
          gmtCreated: '2020-01-15 16:53:17',
          userCreated: 67,
          gmtModified: null,
          userModified: null,
          isDeleted: 0,
          type: 2,
          roleIds: null,
          groupIds: null,
          companyId: 3,
          roleNames: '',
          userCreatedName: '苏州公司的客户端',
          orgName: 'A分支-3级'
        }
      ],
      warehouseTable: [
        {
          userName: 'ASDFGH',
          password: 'e24258039769dd42368742d8bd9d55e8',
          name: 'A3级别',
          contactTel: '',
          organizationId: 85,
          gmtCreated: '2020-01-15 16:53:17',
          userCreated: 67,
          gmtModified: null,
          userModified: null,
          isDeleted: 0,
          type: 2,
          roleIds: null,
          groupIds: null,
          companyId: 3,
          roleNames: '',
          userCreatedName: '苏州公司的客户端',
          orgName: 'A分支-3级'
        }
      ],
      statusTable: [
        {
          userName: 'ASDFGH',
          name: 'A3级别',
          orgName: 'A分支-3级'
        }],
      rules: {

      }
    }
  },
  methods: {
     // 增加行
      addTable () {
       	  var list = {
           userName: 'ASDFGH',
          password: 'e24258039769dd42368742d8bd9d55e8',
          name: 'A3级别',
          contactTel: '',
          organizationId: 85,
          gmtCreated: '2020-01-15 16:53:17',
          userCreated: 67,
          gmtModified: null,
          userModified: null,
          isDeleted: 0,
          type: 2,
          roleIds: null,
          groupIds: null,
          companyId: 3,
          roleNames: '',
          userCreatedName: '苏州公司的客户端',
          orgName: 'A分支-3级'
   		 };
        this.warehouseTable.unshift(list)
        this.rowNum += 1;
      },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    add() {
      this.$router.push('./addOrder')
    },
    // 新增
    handleAdd() {
      this.addFormVisible = true
    },
    addSubmit() {},
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.add-main{
  padding: 20px;
  }
.mt20{margin-top: 20px}
</style>

